<template>
  <div class="app-container" style="height: 100%;padding: 10px;">

    <!--json源信息提示-->
    <div name="开发信息提示" v-if="isInDevMode">
      queryParams: {{ queryParams }}<br/>
    </div>


    <!--查询框-->
    <el-form :model="queryParams" :inline="true" @keyup.enter.native="handleQuery">
      <el-form-item label="对账单号">
        <el-input v-model="queryParams.statementNo" 
                  placeholder="请输入对账单号" 
                  @change="handleQuery"
                  clearable
                  style="width: 220px">
        </el-input>
      </el-form-item>
<!--      <el-form-item label="委托方名称">-->
<!--        <el-input v-model="queryParams.customerNam"-->
<!--                  placeholder="请输入委托方名称"-->
<!--                  @change="handleQuery"-->
<!--                  clearable-->
<!--                  style="width: 230px">-->
<!--        </el-input>-->
<!--      </el-form-item>-->
      <el-form-item label="委托方名称">
        <el-select v-model="queryParams.customerNam"
                  placeholder="请输入委托方名称"
                  @change="handleQuery"
                  clearable
                  filterable
                  style="width: 240px">
          <el-option
              v-for="item in customerNameOptions"
              :key="item.index"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="对账单状态">
        <el-select v-model="queryParams.statementStatus"
                   placeholder="请选择对账单状态"
                   @change="handleQuery"
                   clearable
                   style="width: 180px">
          <el-option
              v-for="item in dict.type.statement_status"
              :key="item.key"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
        <!-- <el-row :gutter="10">
          <el-col :span="4">
            <el-form-item>
              <el-input v-model="queryParams.statementNo" placeholder="对账单号" clearable/>
            </el-form-item>
          </el-col>

          <el-col :span="4">
            <el-form-item>
              <el-input v-model="queryParams.customerNam" placeholder="客户名称" clearable/>
            </el-form-item>
          </el-col>

          <el-col :span="10">
            <el-form-item label="结算状态">
              <el-select v-model="queryParams.genSettlementStatus" clearable placeholder="结算状态"> -->
                <!--<el-option-->
                <!--  v-for="item in genSettlementStatusOptions"-->
                <!--  :key="item.dictValue"-->
                <!--  :label="item.dictLabel"-->
                <!--  :value="item.dictValue"></el-option>-->
              <!-- </el-select>
            </el-form-item>
          </el-col>

        </el-row>

        <el-form-item>
          <el-date-picker
            v-model="queryParams.beginDate"
            type="date"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            placeholder="对账开始日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="queryParams.endDate"
            type="date"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            placeholder="对账结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="queryParams.busStartTime"
            type="date"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            placeholder="业务开始日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="queryParams.busEndTime"
            type="date"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            placeholder="业务结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-input v-model="queryParams.shipName" placeholder="船名/航次" clearable/>
        </el-form-item>
        <el-form-item>
          <el-input v-model="queryParams.billNo" placeholder="业务单号" clearable/>
        </el-form-item>
        <el-form-item>
          <el-input v-model="queryParams.cargoName" placeholder="货名/货类" clearable/>
        </el-form-item>
        <el-form-item>
          <el-input v-model="queryParams.port" placeholder="起运地/目的地" clearable/>
        </el-form-item>
        <el-form-item>
          <el-input v-model="queryParams.inOut" placeholder="操作类型" clearable/>
        </el-form-item>
        <el-form-item>
          <el-input v-model="queryParams.consignee" placeholder="货物相关方" clearable/>
        </el-form-item>
        <el-form-item>
          <el-input v-model="queryParams.createNickName" placeholder="创建人" clearable/>
        </el-form-item> -->
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        <br>
        <el-button type="warning" icon="el-icon-document" size="mini" @click="batchConfirmStatement">确认对账
        </el-button>
        <el-button type="warning" icon="el-icon-document" size="mini" @click="batchConfirmCollection">确认收款
        </el-button>
        <!--  打印对账单-->
        <el-button type="primary" icon="el-icon-printer" size="mini"
                   :disabled="selectedBillStatements.length !== 1"
                   @click="handlePrintCollectionStatement">打印对账单
        </el-button>
      </el-form-item>
    </el-form>


    <!--展示List-->
    <el-table :data="collectionStatementList"
              v-loading="loading"
              border
              highlight-current-row
              @selection-change="handleSelectionChange"
              @current-change="handleRowClick"
              :row-class-name="statementRowClassNameByStatus"
              height="500px"
    >
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="billStatementId" prop="billStatementId" align="center" width="250" v-if="isInDevMode"/>
      <el-table-column label="对账单号" prop="statementNo" align="center" width="160" sortable fixed>
      </el-table-column>
      <el-table-column label="委托方名称" prop="customerNam" align="center" width="270" sortable fixed/>
      <el-table-column label="对账金额" prop="sumAmount" align="center" width="100" sortable/>
      <el-table-column label="对账时间" prop="confirmTime" align="center" width="100" v-if="false" sortable/>
      <el-table-column label="业务数据" prop="projectData" align="center" width="160" sortable>
        <template slot-scope="scope">
          <el-popover title="详细" trigger="hover" placement="top" width="400">
            <pre style="white-space: pre-wrap;">{{ scope.row.projectData }}</pre>
            <div slot="reference">
              <p size="medium" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{ scope.row.projectData }}
              </p>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="币别" prop="currency" align="center" width="80px"
                       sortable/>
      <el-table-column label="推送状态" prop="pushType" align="center" width="80px" v-if="false">
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.pushType === '2' ? 'success' : 'danger'"
            disable-transitions>{{ scope.row.pushType === '2' ? '已推送' : '未操作' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="推送时间" prop="pushTime" align="center" v-if="false">
        <template slot-scope="scope">
          <span>{{ scope.row.pushTime == null ? '' : parseTime(scope.row.pushTime).slice(0, 10) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        prop="creatTime"
        label="生成时间" width="120px">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="生成操作人" prop="createBy" align="center" width="100px"></el-table-column>
<!--      <el-table-column label="开票时间" prop="genSettlementTime" align="center" width="120px">-->
<!--        <template slot-scope="scope">-->
<!--          <span>{{-->
<!--              scope.row.genSettlementTime == null ? '' : parseTime(scope.row.genSettlementTime).slice(0, 10)-->
<!--            }}</span>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column label="开票操作人" prop="genSettlementName" align="center" width="100px"></el-table-column>-->
      <el-table-column label="确认时间" prop="confirmTime" align="center" width="120px">
        <template slot-scope="scope">
          <span>{{ scope.row.confirmTime == null ? '' : parseTime(scope.row.confirmTime) }}</span>
        </template>
      </el-table-column>


      <el-table-column label="确认操作人" prop="confirmName" align="center" width="100px"></el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            style="color: red"
            @click="handleDelete(scope.row)"
            v-hasPermi="['statement:Statement_col:remove']"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--统计信息-->
    <span
      style="color: red;">勾选数量:{{ selectedBillStatementLength }}{{ "\xa0\xa0\xa0" }}对账金额:{{
        selectedBillStatementAmountSum
      }}{{ "\xa0\xa0\xa0" }}</span>


    <!--分页-->
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getCollectionStatementList"
    />


    <!--帆软报表打印:打印对账单-->
    <print-fine-report-dialog
      :dialog-title="'打印对账单'"
      :string-after-url="selectedBillStatementIds[0]?selectedBillStatementIds[0]:''"
      :query-key-word="'对账单'"
      ref="printFineReportDialog"
    ></print-fine-report-dialog>


  </div>
</template>

<script>


import {
  selectBillStatementList, cancelBillStatement,confirmBillStatement,confirmBillCollection
} from "@/api/statement/billStatement";
import customerNameOptionsMixin from "@/mixin/tos/customerNameOptionsMixin";
import PrintFineReportDialog from "@/views/components/common/PrintFineReportDialog.vue";
import {listVProjectTos} from "@/api/business/vProjectTos";


export default {
  name: "collectionStatementList",
  mixins: [customerNameOptionsMixin],
  components: {PrintFineReportDialog},
  dicts: ['statement_status'],
  data() {
    return {
      // 作弊码：从localStorage中获取是否处于开发模式，值为true或false
      isInDevMode: localStorage.getItem('isInDevMode') === 'true',


      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 收款对账单表格数据
      collectionStatementList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      // 勾选的收款对账单
      selectedBillStatements: [],
    };
  },
  created() {

    // 查询收款对账单列表
    this.getCollectionStatementList()

  },
  methods: {
    /** 查询收款对账单列表 */
    async getCollectionStatementList() {

      this.loading = true;
      try {
        await selectBillStatementList(this.queryParams).then(response => {
          this.collectionStatementList = response.rows;
          this.total = response.total;
          console.log(this.collectionStatementList)
          console.log(this.total)
        });
      } catch (error) {
        console.error(error);
        this.loading = false;
      } finally {
        this.loading = false;
      }
    },


    /** 删除按钮操作 */
    handleDelete(row) {
      //如果已经开票，就不能不能删除
      if (row.statementStatus == '2') {
        this.$message.error('已经确认对账！不能删除！')
        return
      }
      this.$confirm('是否确认删除收款对账单编号为"' + row.statementNo + '"的数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        cancelBillStatement(row.billStatementId).then(res => {
          this.getCollectionStatementList();
          //确认收款成功
            this.$message({
              type: 'success',
              message: '取消对账单成功'
            })
        });
      }).catch(() => {
      });
    },


    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getCollectionStatementList();
    },


    // el-table的row点击事件，向父组件传递当前被点击的行
    handleRowClick(row) {
      this.$emit("statementListRowClick", row);
      console.log(row)
    },

    // 多选框选中数据
    handleSelectionChange(selection) {
      this.selectedBillStatements = selection;

    },

    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        genSettlementStatus: "0"
      }
      this.getCollectionStatementList()
      this.$emit("resetQuery")
    },


    // 点击打印对账单按钮
    handlePrintCollectionStatement() {
      this.$refs.printFineReportDialog.openDialog();
    },

    //确认对账
    batchConfirmStatement(){
      if (this.selectedBillStatementLength == 0) {
        this.$message.error('请选择要确认的对账单！')
        return
      }
      this.$confirm('是否确认对账', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        for(let i=0;i<this.selectedBillStatementIds.length;i++){
          confirmBillStatement(this.selectedBillStatementIds[i]).then(res => {
            this.getCollectionStatementList();
            //确认收款成功
            this.$message({
              type: 'success',
              message: '确认对账成功'
            })
          });
        }
      }).catch(() => {
      });
    },

    //确认收款
    batchConfirmCollection(){
      if (this.selectedBillStatementLength == 0) {
        this.$message.error('请选择要确认的对账单！')
        return
      }
      this.$confirm('是否确认收款', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        for(let i=0;i<this.selectedBillStatementIds.length;i++){
          confirmBillCollection(this.selectedBillStatementIds[i]).then(res => {
            this.getCollectionStatementList();
            //确认收款成功
            this.$message({
              type: 'success',
              message: '确认收款成功'
            })
          });
        }
      }).catch(() => {
      });
    },

    // 根据对账单状态返回对应的行样式
    statementRowClassNameByStatus({row, rowIndex}){
      if(row.statementStatus == 1){
        return 'warning-row-billStatementCollection'
      }else if(row.statementStatus == 2){
        return 'success-row-billStatementCollection'
      }
    }


  },
  computed: {

    // 勾选的收款对账单id数组
    selectedBillStatementIds() {
      return this.selectedBillStatements.map(item => item.billStatementId);
    },
    // 勾选的收款对账单数量
    selectedBillStatementLength() {
      return this.selectedBillStatements.length;
    },
    // 勾选的收款对账单对账金额累加
    selectedBillStatementAmountSum() {
      return this.selectedBillStatements.reduce((total, item) => {
        return total + item.sumAmount;
      }, 0);
    },

  }
}
</script>

<style scoped>


.headerButton {
  margin-right: 10px;
}
</style>
<style>
.el-table .warning-row-billStatementCollection {
  background-color: rgb(230, 238, 200);
}

.el-table .success-row-billStatementCollection {
  background-color: rgb(195, 235, 174);
}

</style>
